<!-- 商家销量统计的横向柱状图 -->
<template>
  <div class="com-container">
      <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data () {
        return {
            chartInstance: null, 
            allData: null,  // 后台提供的数据
            startPage: 1,   // 显示的起始页
            totalPage: null,// 总页数
            timerId: null   // 定时器标识
        }
    },
    created() {
        // 组件创建完成后，进行回调函数的注册
        this.$socket.registerCallBack("sellerData", this.getData);
    },
    mounted () {
        this.initChart();
        // this.getData();
        this.$socket.send({
            action: 'getData',
            socketType: 'sellerData',
            chartName: 'seller',
            value: ''
        })
        window.addEventListener('resize', this.screenAdapter);
        this.screenAdapter();
    },
    destroyed () {
        clearInterval(this.timerId);
        // 组件销毁时，取消事件监听器
        window.removeEventListener('resize', this.screenAdapter);
        this.$socket.unRegisterCallBack('sellerData');
    },
    methods: {
        initChart () {
            // 初始化表格，第一个参数是图表显示的位置，第二个参数是图表的主题
            this.chartInstance = this.$echarts.init(this.$refs.seller_ref, this.theme);
            const initOption = {
                title: {
                    text: '▎商家销售统计',
                    textStyle: {
                        fontSize: 40,
                    },
                    top: 20,
                    left: 20
                },
                grid: {
                    top: '20%',
                    left: '3%',
                    right: '6%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                },
                yAxis: {
                    type: 'category',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        z: 0,
                        lineStyle: {
                            width: 66,
                            color: '#2D3443'
                        }
                    }
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: 66,
                        label: {
                            show: true,
                            position: 'right',
                            textStyle: {
                                color: 'white'
                            }
                        },
                        itemStyle: {
                            barBorderRadius: [0, 33, 33, 0],
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#5052EE'
                                },
                                {
                                    offset: 1,
                                    color: '#AB6EE5'
                                }
                            ])
                        }
                    }
                ]
            }
            this.chartInstance.setOption(initOption);
            // 给图表添加鼠标移入移出事件
            this.chartInstance.on('mouseover', () => {
                clearInterval(this.timerId);
            })
            this.chartInstance.on('mouseout', () => {
                this.startInterval(this.timerId);
            })
        },
        getData (ret) {
            // 解构
            // const {data : ret} = await this.$http.get('seller');
            this.allData = ret;
            // 对allData进行排序
            this.allData.sort((a, b) => {
                return a.value - b.value;
            });
            // 计算总页数
            this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1;
            this.updateChart();
            this.startInterval();
        },
        updateChart () {
            // 数据显示的起始位与终止位
            const start = (this.startPage - 1) * 5;
            const end = this.startPage * 5;
            // 获取显示数据
            const showData = this.allData.slice(start, end);
            const sellerNames = showData.map((item) => {
                return item.name;
            });
            const sellerValues = showData.map((item) => {
                return item.value;
            });
            var dataOption = {
                yAxis: {
                    data: sellerNames
                },
                series: [
                    {
                        data: sellerValues,
                    }
                ]
            };
            this.chartInstance.setOption(dataOption);
        },
        startInterval () {
            if (this.timerId) {
                clearInterval(this.timerId);
            }
            this.timerId = setInterval(() => {
                this.startPage++;
                if (this.startPage > this.totalPage) {
                    this.startPage = 1;
                }           
                this.updateChart();
            }, 3000);
        },
        screenAdapter () {
            const titleSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6;
            const adapterOption = {
                title: {
                    textStyle: {
                        fontSize: titleSize,
                    },
                },
                tooltip: {
                    axisPointer: {
                        lineStyle: {
                            width: titleSize,
                        }
                    }
                },
                series: [
                    {
                        barWidth: titleSize,
                        itemStyle: {
                            barBorderRadius: [0, titleSize / 2, titleSize / 2, 0],
                        }
                    }
                ]
            }
            this.chartInstance.setOption(adapterOption);
            // 手动调用图表对象的resize才能产生效果
            this.chartInstance.resize()
        }
    },
    computed: {
        ...mapState(['theme'])
    },
    watch: {
        theme () {
            this.chartInstance.dispose(); // 销毁当前图表
            this.initChart();
            this.screenAdapter();
            this.updateChart();
        }
    }
}
</script>

<style lang='less' scoped>

</style>